/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/21 Time: 10:06
 *
 * 个人中心
 */

import React, {Component} from 'react';
import {
    SafeAreaView, ScrollView, Text, TouchableOpacity, View
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './AccountSettingsScreen.Style';
import AntDesign from "react-native-vector-icons/AntDesign";
import User from "../../../model/User/User";

class AccountSettingsScreen extends Component {

    static navigationOptions = ({navigation}) => ({
        headerTitle: `账户设置`,
    });

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            user:{},
        };

        User.getUser(user => {
            this.setState({
                user:user,
            })
            console.log(JSON.stringify(this.state.user))
        });
    }

    render() {
        return (
            <SafeAreaView style={styles.body}>
                <ScrollView style={styles.body}>
                    <View style={styles.formFirst}>
                        <View style={styles.formUpper}>
                            <View style={styles.leftBox}>
                                <Text style={styles.leftBoxText}>
                                    账号
                                </Text>
                            </View>
                            <View style={styles.rightBox}>
                                <Text style={styles.rightBoxText}>
                                    {this.state.user.username||""}
                                </Text>
                            </View>
                        </View>
                        <View style={styles.formMiddle}>
                            <View style={styles.leftBox}>
                                <Text style={styles.leftBoxText}>
                                    工号
                                </Text>
                            </View>
                            <View style={styles.rightBox}>
                                <Text style={styles.rightBoxText}>
                                    {this.state.user.userid||""}
                                </Text>
                            </View>
                        </View>
                        <View style={styles.formLower}>
                            <View style={styles.leftBox}>
                                <Text style={styles.leftBoxText}>
                                    所属部门
                                </Text>
                            </View>
                            <View style={styles.rightBox}>
                                <Text style={styles.rightBoxText}>
                                    {this.state.user.dep||""}
                                </Text>
                            </View>
                        </View>
                    </View>

                    <View style={styles.formSecond}>
                        <View style={styles.formUpper}>
                            <View style={styles.leftBox}>
                                <Text style={styles.leftBoxText}>
                                    手机长号
                                </Text>
                            </View>
                            <View style={styles.rightBox}>
                                <Text style={styles.rightBoxText_right}>
                                    {this.state.user.phone||""}
                                    {/*<AntDesign name={'right'} size={20} style={{color: '#3977ff'}}/>*/}
                                </Text>
                            </View>
                        </View>
                        <View style={styles.formLower_two}>
                            <View style={styles.leftBox}>
                                <Text style={styles.leftBoxText}>
                                    手机短号
                                </Text>
                            </View>
                            <View style={styles.rightBox}>
                                <Text style={styles.rightBoxText}>
                                    {this.state.user.phone_short||""}
                                </Text>
                            </View>
                        </View>
                    </View>

                    <View style={styles.formThird}>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => {
                            this.props.navigation.navigate('ChangePasswordScreen')
                        }}>
                            <View style={styles.formUpper}>
                                <View style={styles.leftBox}>
                                    <Text style={styles.leftBoxText}>
                                        修改密码
                                    </Text>
                                </View>
                                <View style={styles.rightBox}>
                                    <Text style={styles.rightBoxText_right}>
                                        <AntDesign name={'right'} size={20} style={{color: '#3977ff'}}/>
                                    </Text>
                                </View>
                            </View>
                        </TouchableOpacity>
                    </View>

                </ScrollView>
            </SafeAreaView>
        )
    }
}

const props = state => {
    return {

    }
};

export default AccountSettingsScreen = connect(props)(AccountSettingsScreen);